<template>
  <view class="amount">
    <uni-nav-bar
      title="量"
      statusBar="true"
      leftIcon="back"
      fixed="true"
      rightIcon="search"
      @clickLeft="back"
    ></uni-nav-bar>
    <!-- 筛选 -->
    <view class="filter">
      <text class="filter_sort nomarked" @click="categorySelectShow">类别</text>
      <view class="filter_triangle" style="left:220rpx;" @click="categorySelectShow"></view>
      <text
        class="filter_calendarStart nomarked"
        @click="calendarSelectOpen"
      >{{dateFormat("mm.dd", calendarSelectedStart)}}</text>
      <view class="filter_triangle" style="left:520rpx;" @click="calendarSelectOpen"></view>
      <div class="nomarked" style="position:absolute;left:560rpx;bottom:20rpx;">至</div>
      <text
        class="filter_calendarEnd nomarked"
        @click="calendarSelectOpen"
      >{{dateFormat("mm.dd", calendarSelectedEnd)}}</text>
      <view class="filter_triangle" style="left:700rpx;" @click="calendarSelectOpen"></view>
    </view>
    <!-- 已选 -->
    <view class="selected">
      <text style="position:absolute;left:70rpx;top:13rpx;">{{categorySelected[0] + ':'}}</text>
      <text style="position:absolute;left:250rpx;top:13rpx;">{{'量 ' + categorySelected[1] + '吨'}}</text>
      <text style="position:absolute;left:430rpx;top:13rpx;">{{'费用 ' + categorySelected[2] + '元'}}</text>
    </view>
    <!-- 列表 -->
    <!-- <view class="list_head nomarked">
      <text class="list_head_txt" style="left:20rpx">编号</text>
      <text class="list_head_txt" style="left:150rpx;">人员</text>
      <text class="list_head_txt" style="left:290rpx;">类别</text>
      <text class="list_head_txt" style="left:420rpx;">量</text>
      <text class="list_head_txt" style="left:550rpx;">费用</text>
    </view>
    <view
      class="list_data"
      v-for="(item, index) in dataList"
      :key="index"
      @click="selectData(index)"
    >
      <text class="list_data_txt" style="left:20rpx">{{item.createrId}}</text>
      <text class="list_data_txt" style="left:150rpx;">{{item.createrName}}</text>
      <text class="list_data_txt" style="left:290rpx;">{{item.postName}}</text>
      <text class="list_data_txt" style="left:420rpx;">{{item.count + item.unit}}</text>
      <text class="list_data_txt" style="left:550rpx;">{{item.price + '元'}}</text>
      <uni-icons
        style="position:absolute;top:34rpx;right:25rpx;color:#909090;"
        type="forward"
        size="15"
      ></uni-icons>
      <view class="list_data_line"></view>
    </view> -->
    <!-- 类别选择 -->
	
	<scroll-view class="scroll_table" :scroll-x="true">
		<view class="table_head flex_row">
			<text class="column_item">编号</text>
			<text class="column_item">姓名</text>
			<text class="column_item">量</text>
			<text class="column_item">型号</text>
			<text class="column_item">购置年限</text>
			<text class="column_item">车牌号</text>
			<text class="column_item">公里数</text>
			<text class="column_item">加油数</text>
			<text class="column_item">电耗</text>
			<text class="column_item">水耗</text>
			<text class="column_item">油耗比</text>
			<text class="column_item">电耗比</text>
	<!-- 		<text class="column_item">费用</text>
			<text class="column_item">费用</text> -->
		</view>
		<view class="mg_tp_20"></view>
		<view class="table_row flex_row" v-for="(item,ind) in dataList" :key="ind">
			<text class="column_item">{{item.createrId}}</text>
			<text class="column_item">{{item.createrName}}</text>
			<text class="column_item">{{item.totalCount}}</text>
			<text class="column_item">{{item.model}}</text>
			<text class="column_item">0</text>
			<text class="column_item">{{item.plateNo}}</text>
			<text class="column_item">{{item.mileage}}</text>
			<text class="column_item">{{item.startMileage}}</text>
			<text class="column_item">0</text>
			<text class="column_item">{{item.waterRate}}</text>
			<text class="column_item">{{item.refuelRate}}</text>
			<text class="column_item">{{item.electricRate}}</text>
			<!-- <text class="column_item">{{item.createrName}}</text> -->
			<!-- <text class="column_item">{{item.postName}}</text>
			<text class="column_item">{{item.count + item.unit}}</text>
			<text class="column_item">{{item.price + '元'}}</text> -->
			<!-- <text class="column_item">{{item.mileage}}</text> 7 -->
		</view>
	</scroll-view>
	<uni-load-more :status="loadStatus"></uni-load-more>
    <lb-picker
      ref="categorySelect"
      v-model="categorySelected"
      mode="unlinkedSelector"
      :list="categoryList"
    ></lb-picker>
    <!-- 日历选择 -->
    <uni-calendar
      ref="calendarSelect"
      :clear-date="true"
      :lunar="true"
      :insert="false"
      :startDate="calendarSelectedStartString"
      :endDate="calendarSelectedEndString"
      :range="true"
      @confirm="calendarConfirm"
    />
  </view>
</template>

<script>
import LbPicker from "@/components/lb-picker";
import uniCalendar from "@/components/uni-calendar/uni-calendar.vue";
var _this;
export default {
  data() {
    return {
		loadStatus:'more',
      categorySelected: ["清运司机", 100, 300], //类别已选
      categoryList: [
        [
          {
            label: "清运司机",
            value: "清运司机"
          },
          {
            label: "清运司机",
            value: "清运司机"
          },
          {
            label: "清运司机",
            value: "清运司机"
          }
        ],
        [
          {
            label: "100吨",
            value: 100
          },
          {
            label: "200吨",
            value: 200
          },
          {
            label: "300吨",
            value: 300
          }
        ],
        [
          {
            label: "100元",
            value: 100
          },
          {
            label: "200元",
            value: 200
          },
          {
            label: "300元",
            value: 300
          }
        ]
      ], //类别选择列表
      calendarSelectedStart: new Date(), //日期选择 开始
      calendarSelectedEnd: new Date(), //日期选择 结束
      dataList: [
        // {
        //   id: "5ee8da25f328d26d8e4e6360",
        //   createTime: 1592318501376,
        //   lastTime: 1592318501376,
        //   createrId: "10001",
        //   createrName: "超管",
        //   plateNo: "粤B10002",
        //   lng: "117.397026",
        //   lat: "32.972225",
        //   startMileage: 856,
        //   postName: "清运司机",
        //   garbageTyep: "果皮箱",
        //   count: 1,
        //   unit: "升(L)",
        //   price: 10000
        // },
        // {
        //   id: "5ee8da25f328d26d8e4e6360",
        //   createTime: 1592318501376,
        //   lastTime: 1592318501376,
        //   createrId: "10001",
        //   createrName: "超管",
        //   plateNo: "粤B10002",
        //   lng: "117.397026",
        //   lat: "32.972225",
        //   startMileage: 856,
        //   postName: "清运司机",
        //   garbageTyep: "果皮箱",
        //   count: 1,
        //   unit: "升(L)",
        //   price: 10000
        // }
      ],
	  page:0,
	  isLoading:false,
	  pageSize:20
    };
  },
  onLoad() {
    _this = this;
    this.refreshData();
  },
  watch: {
    calendarSelectedStart: function() {
      this.refreshData();
    },
    calendarSelectedEnd: function() {
      this.refreshData();
    },
    categorySelected: function() {
      this.refreshData();
    }
  },
  computed: {
    //日期选择 开始 文本
    calendarSelectedStartString() {
      return this.getDate(new Date(), -90).fullDate;
    },
    //日期选择 结束 文本
    calendarSelectedEndString() {
      return this.getDate(new Date(), 30).fullDate;
    }
  },
  onReachBottom() {
  	this.page++
	this.queryData()
	this.loadStatus = 'loading'
  },
  onPullDownRefresh() {
  	this.refreshData()
  },
  methods: {
	  refreshData(){
		  this.page = 0
		  this.pageSize = 20
		  this.dataList = []
		  this.queryData()
	  },
    back() {
      this.$utils.navBack();
    },
    //选择数据
    selectData(index) {
      alert(index);
    },
    //打开选择
    categorySelectShow(){
      this.$refs.categorySelect.show();
    },
    //打开日历
    calendarSelectOpen(){
      this.$refs.calendarSelect.open();
    },
    //日历选择 确定
    calendarConfirm(e) {
      if (e.range.before) this.calendarSelectedStart = new Date(e.range.before);
      if (e.range.after) this.calendarSelectedEnd = new Date(e.range.after);
    },
    //查询数据
    queryData() {
		if(this.isLoading){
			return ;
		}
		this.isLoading = true
      var data = {
        createId: "" + uni.getStorageSync("userInfo").uid,
        // startTime: this.calendarSelectedStart.getTime(),
        // endTime: this.calendarSelectedEnd.getTime(),
        postName: this.categorySelected[0],
		page:this.page,
		pageSize:this.pageSize
      };
      _this.$utils.http
        .post("win/workload/list", data)
        .then(res => {
			uni.stopPullDownRefresh()
          if (res.code === 200) {
            _this.dataList = _this.dataList.concat(res.data);
			if(res.data == null ||res.data.length<this.pageSize){
				this.loadStatus = 'noMore'
			}else{
				this.loadStatus = 'more'
			}
          } else {
            console.log("请求失败");
          }
		  _this.isLoading = false
        })
        .catch(err => {
			this.loadStatus = 'more'
			uni.stopPullDownRefresh()
			_this.isLoading = false
          console.log("执行失败:" + JSON.stringify(err));
        });
    },
    //时间格式化
    dateFormat(fmt, date) {
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString() // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    },
    //获取任意时间
    getDate(date, AddDayCount = 0) {
      if (!date) {
        date = new Date();
      }
      if (typeof date !== "object") {
        date = date.replace(/-/g, "/");
      }
      const dd = new Date(date);
      dd.setDate(dd.getDate() + AddDayCount); // 获取AddDayCount天后的日期
      const y = dd.getFullYear();
      const m =
        dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1; // 获取当前月份的日期，不足10补0
      const d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate(); // 获取当前几号，不足10补0
      return {
        fullDate: y + "-" + m + "-" + d,
        year: y,
        month: m,
        date: d,
        day: dd.getDay()
      };
    },
    //补0
    PrefixZero(num, n) {
      return (Array(n).join(0) + num).slice(-n);
    }
  },
  components: {
    LbPicker,
    uniCalendar
  }
};
</script>

<style scoped>
@import "@/common/css/main.css";
.scroll_table{
	width: 750rpx;

	flex: 1;
}
.table_head{
	background-color: #fff;
	height: 80rpx;
}
.table_row{
	background-color: #fff;
	height: 80rpx;
	border-bottom:1rpx solid #eee;
	/* background-color: red; */
}
.column_item{
	background-color: #fff;
	flex-shrink: 0;
	width: 200rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 30rpx;
	color:#909090;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.testA {
  border: 1px solid red;
}
.testB {
  border: 1px solid rgb(38, 201, 87);
}
page {
  width: 750rpx;
  min-height: 100%;
  background-color: #f6f6f6;
  display: flex;
  font-size: 30rpx;
}
.nomarked {
  color: #909090;
}
.amount {
  width: 750rpx;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  background: #f6f6f6;
  font-size: 30rpx;
}
.filter {
  position: relative;
  width: 100%;
  height: 130rpx;
  background: #fff;
  font-size: 30rpx;
}
.filter_sort {
  position: absolute;
  left: 130rpx;
  bottom: 20rpx;
}
.filter_calendarStart {
  position: absolute;
  left: 430rpx;
  bottom: 20rpx;
}
.filter_calendarEnd {
  position: absolute;
  left: 610rpx;
  bottom: 20rpx;
}
.filter_triangle {
  position: absolute;
  width: 0;
  height: 0;
  bottom: 33rpx;
  border-left: 7rpx solid transparent;
  border-right: 7rpx solid transparent;
  border-top: 11rpx solid #909090;
}
.selected {
  position: relative;
  width: 100%;
  height: 70rpx;
  border-top: 1rpx solid #eeeff2;
  border-bottom: 1rpx solid #eeeff2;
  background: #f4f7fc;
  font-size: 30rpx;
  color: #7d96d8;
}
.list_head {
  position: relative;
  width: 100%;
  height: 100rpx;
  background: #fff;
  font-size: 30rpx;
}
.list_head_txt {
  position: absolute;
  top: 25rpx;
  width: 150rpx;
  text-align: center;
}
.list_data {
  position: relative;
  width: 100%;
  height: 100rpx;
  background: #fff;
}
.list_data_txt {
  position: absolute;
  top: 25rpx;
  width: 150rpx;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.list_data_line {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 90%;
  height: 1rpx;
  background-color: #e2e2e2;
}
</style>
